import { useIntl } from '@umijs/max';
import ReactECharts from 'echarts-for-react';
import React from 'react';

// 类型定义
interface DischargeRecord {
  day?: string;
  Charge?: number;
  Discharge?: number;
}

export interface DischargeDataInfo {
  dimensions?: string[];
  source?: DischargeRecord[];
}

interface DischargeInfoProps {
  dataset?: DischargeDataInfo;
}

const DischargeInfo: React.FC<DischargeInfoProps> = ({ dataset }) => {
  const intl = useIntl();
  const isEnglish = intl.locale === 'en-US';
  const getOptions = () => ({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      data: ['Charge', 'Discharge'],
      show: false,
    },
    grid: {
      left: '5%',
      right: '4%',
      bottom: '0%',
      top: '15%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: dataset?.source?.map((item) => item.day),
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: intl.formatMessage({ id: 'global.times' }),
        axisLine: {
          show: true,
        },
      },
    ],
    series: [
      {
        name: intl.formatMessage({ id: 'global.charge' }),
        type: 'bar',
        data: dataset?.source?.map((item) => item.Charge),
        itemStyle: {
          color: '#1A6CFE',
        },
        // emphasis: {
        //   focus: 'series',
        // },
      },
      {
        name: intl.formatMessage({ id: 'global.discharge' }),
        type: 'bar',
        data: dataset?.source?.map((item) => item.Discharge),
        itemStyle: {
          color: '#67C23A',
        },
        // emphasis: {
        //   focus: 'series',
        // },
      },
    ],
  });

  return (
    <div>
      <ReactECharts option={getOptions()} style={{ height: isEnglish ? 310 : 190 }} />
    </div>
  );
};

export default DischargeInfo;
